<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML实验</title>
</head>
<body>
	<canvas id="Canvas" width="600" height="200"></canvas>
	<header>这是页头</header>
	<figure> 
		<figcaption> 
			<p>Thisisanimageofsomethinginteresting.</p> 
		</figcaption>
    </figure>
    <ul contenteditable="true">
    	<li>第一项</li>
    </ul>
    <input type="text" placeholder="这个是占位符" />
    <input type="email" name="email" />
    <footer>这是页脚</footer>
    <form action="">
    	<input type="text" required="required"  placeholder="这个是占位符" pattern="[A-Za-z]{4,10}" />
        <select name="select" required="required">
            <option>中国</option>
            <option value="1">中国</option>
        </select>
        <input type="checkbox" required="required" value="0" />
        <input type="url" name="url" id="url" />
        <button type="button" onClick="this.form.submit();">提交</button>
        <button type="submit">Submit</button>
        <input type="range" style="width:400px" min="1" max="400" />
    </form>
    <h3>搜索结果</h3> 
		<p>我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做<mark>北川景子</mark>。</p> 
</body>
</html>

<script>
	function randColor() {
		var colorArr = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
		var color = '';
		for(var i = 0; i < 6; i++) {
			var index = Math.floor(Math.random()*100)%16;
			color += colorArr[index];
		}
		return color;
	}
	
	function randHeight() {
		return Math.floor(Math.random()*100)%80-40;
	}
	var c=document.getElementById("Canvas");
	var cxt=c.getContext("2d");
	
	cxt.render = function(){
		this.fillStyle="000";
		this.fillRect(0, 0, 600, 200);
	}
	cxt.render();
	cxt.fillStyle="0f0";
	cxt.lineWidth = 1;
//	cxt.lineColor = "0f0";
//	cxt.beginPath();
	cxt.strokeStyle = "0f0";

	function draw() {
		cxt.render();
		cxt.beginPath();
		cxt.moveTo(0,100);
		for(var i = 5; i < 600; i += 5) {
			cxt.lineTo(i, randHeight()+100);
		}
//		cxt.closePath();
		cxt.stroke();
	}
	window.setInterval(draw, 40);
</script>